
//   (function () {
//     var metaEl = document.createElement('meta')
//     var dpr = 1 / window.devicePixelRatio
//     metaEl.setAttribute('name', 'viewport')
//     metaEl.setAttribute('content', 'width=device-width, user-scalable=no, initial-scale=' + dpr + ', maximum-scale=' + dpr + ', minimum-scale=' + dpr)
//   }())



window.onresize=function(){
    root('content','box')
}

window.onload=function(){

    // sizeWidth();
root("content","box")
  //定义数据,模拟效果
window.onscroll=function(){
    if(checkscoll()){

        var datanum={
            'data':[
                {
                    "src":'./images/0.jpg'
                },
                {
                    "src":'./images/1.jpg'
                },
                {
                    "src":'./images/2.jpg'
                },
                {
                    "src":'./images/3.jpg'
                },
                {
                    "src":'./images/4.jpg'
                },
                {
                    "src":'./images/5.jpg'
                },
                {
                    "src":'./images/6.jpg'
                },
                {
                    "src":'./images/7.jpg'
                },
                {
                    "src":'./images/8.jpg'
                }
                ,{
                    "src":'./images/9.jpg'
                },
                {
                    "src":'./images/10.jpg'
                },
                {
                    "src":'./images/11.jpg'
                },
                {
                    "src":'./images/12.jpg'
                },
                {
                    "src":'./images/13.jpg'
                },
                {
                    "src":'./images/14.jpg'
                },
                {
                    "src":'./images/15.jpg'
                },
                {
                    "src":'./images/16.jpg'
                },
                {
                    "src":'./images/17.jpg'
                }
                
            ]
          }
        var oParent=document.getElementById('content')
        for(var i=0;i<datanum.data.length;i++){
            var box=document.createElement('div')
            box.className='box'
            oParent.appendChild(box)
            var box_img=document.createElement('div')
            box_img.className='box_img'
            // box_img.innerHTML='<img src="./images/11.jpg" alt="">'
            box.appendChild(box_img)

            var img=document.createElement('img')
            img.src=datanum.data[i].src
            box_img.appendChild(img)
        }
        root("content",'box')

    }
}



}



//定义函数获取根节点
function root(parent1,box){
var parent=document.getElementById(parent1)

    console.log(parent)
//    var oBOXs=getclass(parent,box)
var oBOXs=parent.getElementsByClassName(box)
console.log(oBOXs)
   //获得图片宽度
   var obxw=oBOXs[0].offsetWidth
   console.log(obxw)
   //计算列数
   var cols=Math.floor(document.documentElement.clientWidth/obxw)
   console.log(cols)
   //设置父元素样式
   parent.style.cssText='width:'+obxw*cols+'px;margin:0 auto;'

   //定义数组
   var harry=[]
   for(var i=0;i<oBOXs.length;i++){
    //先清空样式
    oBOXs[i].style.cssText=''
        if(i<cols){
            harry.push(oBOXs[i].offsetHeight)
        }else{

            //找到最小的高度
            var minH=Math.min.apply(null,harry)
            // console.log(minH)
            var index=getMinhIndex(harry,minH)
            // console.log(index)

            //最小样式style
            // oBOXs[i].style.position="absolute"
            // oBOXs[i].style.top=minH+'px'
            // oBOXs[i].style.left=obxw*index+'px'
            oBOXs[i].style.cssText='position:absolute;top:'+minH+'px;left:'+obxw*index+'px'
            //更新每一列的高度
            harry[index]+=oBOXs[i].offsetHeight

            console.log(harry)

        }
        
   }
}

//找到数组最小的下表
function getMinhIndex(arr,min){
for (const key in arr) {
    if (arr[key]==min) {
    return key
    }
}
}


//检测滚动条

function checkscoll(){
    var oParent=document.getElementById('content')
    var oBOXs=oParent.getElementsByClassName('box')
     //获取最后一块数据到顶部的距离+ 它自身一半的距离
    var lastheight=oBOXs[oBOXs.length-1].offsetTop+Math.floor(oBOXs[oBOXs.length-1].offsetHeight/2)
    console.log(lastheight)
    //获取滚动条滚动距离
    var scoll=document.body.scrollTop || document.documentElement.scrollTop

  var height=document.documentElement.clientHeight || document.body.clientHeight

  return (lastheight-scoll<height)?true:false
}





